<template>
  <div class="common-layout">
    <el-form class="header" :model="queryParams" ref="queryRef" :inline="true">

      <el-form-item label="书名" prop="ipaddr">
        <el-select style="width: 140px" clearable v-model="queryParams.book" placeholder="书名">
          <el-option v-for="item in 7" :key="item" :label= "`${('book')}${item}`" :value= "`${('book')}${item}`" />
        </el-select>
      </el-form-item>

      <el-form-item label="单元" prop="ipaddr">
        <el-select style="width: 140px" clearable v-model="queryParams.unit" placeholder="单元名称">
          <el-option v-for="item in 5" :key="item" :label= "`${('unit')}${item}`" :value= "`${('unit')}${item}`" />
        </el-select>
      </el-form-item>

      <el-form-item label="组号" prop="group">
        <el-input clearable v-model="queryParams.complete"
                  style="width: 140px;"
                  placeholder="请输入组号"></el-input>
      </el-form-item>

      <el-form-item label="学生">
        <el-input style="width: 140px" clearable v-model="queryParams.userName" placeholder="请输入学生姓名"></el-input>
      </el-form-item>

      <el-form-item label="校区">
        <el-input style="width: 140px" clearable v-model="queryParams.userSchool" placeholder="请输入校区名称"></el-input>
      </el-form-item>

      <el-form-item label="类型">
        <el-select style="width: 140px" clearable v-model="queryParams.type" placeholder="请选择">
          <el-option
              v-for="dict in studyTypeList"
              :key="dict.type"
              :label="dict.label"
              :value="dict.type"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchByUnit">查询</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div v-if="false"  style="border: solid 1px;margin: 10px 10px">

    </div>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="padding-left: 20px">
        <el-table :data="wordStudyList" >
          <el-table-column label="书名" align="center" prop="book" >
            <template #default="scope">
              <span v-if="scope.row.book === null">---</span>
              <span>{{scope.row.book}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单元" align="center" prop="unit" >
            <template #default="scope">
              <span v-if="scope.row.unit === null">---</span>
              <span>{{scope.row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="组号" width="80" align="center" prop="complete" >
            <template #default="scope">
              <span v-if="scope.row.unit !== null">---</span>
              <span v-else>{{scope.row.complete}}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型"
                           align="center"
                           :formatter="formatType"
                           prop="type" >
          </el-table-column>
          <el-table-column label="校区" align="center" prop="userSchool" />
          <el-table-column label="学生" align="center" prop="userName" />
          <el-table-column label="学习个数" align="center" prop="correctNum" />
          <el-table-column label="总个数" align="center" prop="wordNum" />
          <el-table-column label="学习时间" width="180" align="center" prop="createTime" />
          <el-table-column label="完成率" align="center" prop="correctRate" >
            <template #default="scope">
              <span>{{ parseInt(scope.row.correctRate * 100 ) }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="用时" align="center" prop="usedTime" />
          <el-table-column label="详情" align="center" width="80" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link @click="getDetails(scope.row)" type="primary">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            style="margin-right: 20px"
            v-show="size > 0"
            :total="size"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />
      </el-col>
    </el-row>

    <el-dialog style="padding: 20px" title="记录详情" v-model="testResultWindow" width="900px" append-to-body>
      <el-row type="flex" justify="center">
        <el-text style="font-size: 18px;color: rebeccapurple">
          单元总数:{{ testTotalNum }}---完成个数{{
            testCompleteNum
          }}---完成率:{{ parseInt(testCompleteRate) }}%
        </el-text>
      </el-row>
      <el-table :data="testCompleteData">
        <el-table-column label="书名" align="center" prop="book"/>
        <el-table-column label="单元" align="center" prop="unit"/>
        <el-table-column label="单词/词组" align="center" prop="name"/>
        <el-table-column label="汉语" align="center" prop="chinese"/>
        <el-table-column label="记录时间" width="180" align="center" prop="time"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup >
import {ref} from "vue";
import {listStudy_record, studyTypeList} from "@/api/word/wordRecord.js";
import {listStudyRecordDetailByUser} from "@/api/word/index.js";

const { proxy } = getCurrentInstance()

let queryParams = ref({
  unit: undefined,
  book: undefined,
  type: undefined,
  pageNum: 1,
  pageSize: 10
})

// 弹窗
let testTotal = ref(0)
let testTotalNum = ref(0)
let testCompleteNum = ref(0)
let testCompleteData = ref([])
let testCompleteRate = ref(0)
let testResultWindow = ref(false)
let size = ref(0)
let wordStudyList = ref([])

initPage()

function initPage(){
  // queryParams.value.unit = 'unit1'
  // queryParams.value.book = 'book1'
  handleQuery()
}

function resetQuery(){
  queryParams.value.book = ''
  queryParams.value.unit = ''
  queryParams.value.type = undefined
  queryParams.value.complete = undefined
  queryParams.value.userName = undefined
  queryParams.value.userSchool = undefined
  handleQuery()
}

// 格式化函数：根据 typeList 转换 type 值
function formatType(row, column, cellValue) {
  // 从 typeList 中找到匹配的项（cellValue 即当前行的 type 值）
  // console.log(cellValue)
  const matched = studyTypeList.find(item => item.type === cellValue);
  // 找到则返回 label，否则返回原始值或默认文本
  return matched ? matched.label : '未知类型';
}

function getDetails(row) {
  if (row.practice === undefined || row.practice === null) {
    proxy.$modal.msgWarning("此记录详情未开放")
    return
  }
  let query = {
    practice: row.practice,
    userId: row.userId,
  }
  // console.log(row)
  testTotalNum.value = row.wordNum
  testCompleteNum.value = row.correctNum
  testCompleteRate.value = parseInt(row.correctRate * 100)
  listStudyRecordDetailByUser(query).then(res => {
    // console.log(query)
    if (res.code === 200) {
      // console.log(res)
      if (res.data === undefined || res.data === null || res.data.length === 0) {
        proxy.$modal.msgWarning("此记录详情已被删除或未查询到数据")
        return
      }
      testResultWindow.value = true
      testCompleteData.value = res.data
      testTotal.value = res.data.length
    }
  })
}

function searchByUnit(){
  let userName = queryParams.value.userName;
  let userSchool = queryParams.value.userSchool;
  let name = userName === undefined ? '无' : userName
  let school = userSchool === undefined ? '无' : userSchool
  let group = queryParams.value.complete ===  undefined ? '无' : queryParams.value.complete

  let bookName = queryParams.value.book;
  let book = bookName === undefined ? '无' : bookName
  let unitName = queryParams.value.unit;
  let unit = unitName === undefined ? '无' : unitName
  let type = queryParams.value.type;
  let typeName = '无'
  if (type !== undefined ) {
    typeName = studyTypeList.find(item =>
        item.type === type
    )
    typeName = typeName.label
  }

  proxy.$modal.msg("查询的书名:" + book +  "  单元:" + unit  +  "  组号:" + group
      + "  用户:" + name + "  校区:" + school + ' 类型:' + typeName)
  handleQuery()
}

function handleQuery() {
  // console.log(queryParams.value);
  listStudy_record(queryParams.value).then(res => {
    wordStudyList.value = res.rows
    // console.log(res)
    size.value = res.total
  })
}
</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
